<html>
<head>
    <meta charset="utf-8">
    <meta name="author" content="lz">
    <title></title>
    <script src="jQuery/jquery-3.1.1.js"></script>
    <style>
        input{
            display: none;
        }
        img{
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <from>
        <div id="chooseimg">
            <img src="images/add.png" alt="">
            <input type="file">
            <img src="images/add.png" alt="">
            <input type="file">
            <img src="images/add.png" alt="">
            <input type="file">
        </div>
        <div>
            <button type="button">添加</button>
            <button type="submit">上传</button>
        </div>
    </from>
</body>
</html>
<script>
    // 点击添加按钮，添加一对img和input
    $('button').eq(0).click(function(){
        $('#chooseimg').append('<img src="images/add.png" alt="">').append('<input type="file">')
    })

    // 点击图片实现选择文件的效果
    // 如果想要给后添加的占位符 也实现选择文件的效果，最好使用代理事件，否则用click（），新添加到占位符不能实现选择文件的效果
    // $('img').click(function(){
        // delegate() 为匹配的所有元素绑定一个事件
        // 用法delegate(selector,event,func)
        // selectoy:选择器 选择给谁绑定事件
        // event 事件类型 比如click
        // func 当触发时间后执行的操作
    //     $('#chooseimg').delegate('img','click',function(){
    //         console.dir(this);
    //         $(this).next().click();
    //     });
    // })

    // delegate已经被弃用 这里可以使用on来代替
    // 用法on(event,selector,func)
    $('#chooseimg').on('click','img',function(){
        $(this).next().click();
    })

    // 显示时也要用delegate 理由同上
    $('#chooseimg').on('change','input',function(){
        // console.log('asda')
        var file = this.files[0];
        if(file.type.startsWith('image')){
            $(this).prev().attr('src',URL.createObjectURL(file))
        }
    })


</script>